@use "src/styles/variables" as *;

.vm-custom-panel {
  display: grid;
  grid-template-columns: 100%;
  align-items: flex-start;
  gap: $padding-medium;
  height: 100%;

  &_mobile {
    gap: $padding-small;
  }

  &__warning {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: space-between;
    gap: $padding-small;

    &_mobile {
      grid-template-columns: 1fr;
    }
  }

  &__trace {
  }

  &-body {
    position: relative;

    &-header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: $font-size-small;
      margin: -$padding-medium 0-$padding-medium $padding-medium;
      padding: 0 $padding-medium;
      border-bottom: $border-divider;
      z-index: 1;

      &__tabs {
        display: flex;
        justify-content: flex-start;
        flex-grow: 1;
      }

      &__graph-controls {
        display: flex;
        align-items: center;
        gap: $padding-small;
        margin: 5px 10px;
      }
    }

    &_mobile &-header {
      margin: -$padding-global 0-$padding-global $padding-global;
      padding: 0 $padding-global;
    }
  }
}
